<template>
  <div class="landDetailBox">
    <div class="title">
      <label>地块详情</label>
      <div class="opbtn">
        <span v-if="detail.farmId == userStore.userInfo.farmId"><img src="/src/assets/dt1.png" alt="" @click="goEdit"/>
        </span>
        <span v-if="detail.farmId == userStore.userInfo.farmId"><img src="/src/assets/dt2.png" alt="" @click="del"/> </span>
        <span><img src="/src/assets/dt3.png" style="height: 15px;" alt="" @click="close"/> </span>
      </div>
    </div>
    <el-tabs v-model="activeName" type="card" style="margin-top:5px;">
      <el-tab-pane label="基本信息" name="baseinfo">
        <div class="tabContent">
          <base-info v-if="tabIndex==1" :detail="detail"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="土壤养分" name="nutrient">
        <soilInfo :detail="detail" v-if="activeName=='nutrient'" />
      </el-tab-pane>
      <el-tab-pane label="积雨积温" name="rain">
        <temperature :detail="detail" v-if="activeName=='rain'" />
      </el-tab-pane>
      <el-tab-pane label="农事记录" name="farming">
        <farming :detail="detail" v-if="activeName=='farming'" />
      </el-tab-pane>
      <el-tab-pane label="长势记录" name="growth">
        <growth :detail="detail" v-if="activeName=='growth'" />
      </el-tab-pane>
    </el-tabs>


  </div>
</template>
<script setup>
import {ref, onMounted, watch} from 'vue'
import {useRouter} from "vue-router"
import {getLandDetail, delFarmLand} from '@/api/plant'
import baseInfo from '../components/baseInfo.vue'
import soilInfo from '../components/soilInfo.vue'
import temperature from '../components/temperature.vue'
import farming from '../components/farming.vue'
import growth from '../components/growth.vue'
import {useUserStore} from '@/pinia/modules/user'
const router = useRouter()
const userStore = useUserStore()

const props = defineProps({
  farmLandId: '',
  farmLandPic: '',
  farmLandNo: ''
})
const emit = defineEmits(['close', 'clickDel'])

const activeName = ref('baseinfo')
const tabIndex = ref(1)
const detail = ref({}) // 详情数据

onMounted(async () => {
  get_land_detail()
})

watch(() => props.farmLandId, (n, o) => {
  tabIndex.value = 1
  get_land_detail()
})

const get_land_detail = () => {
  getLandDetail(props.farmLandId).then(res => {
    detail.value = {...res.data, ...{farmLandPic: props.farmLandPic, farmLandNo: props.farmLandNo}}
  })
}

const setTab = (index) => {
  tabIndex.value = index
}

const goEdit = () => {
  emit('eidt', detail.value)
}

const del = (item) => {
  emit('clickDel', detail.value)
}

const close = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.landDetailBox {
  padding: 20px;
  padding-top: 0;
  font-family: PingFangSC, PingFang SC;
  color: #333333;

  .title {
    display: flex;
    //align-items: center;
    height: 30px;
    margin: 15px 0 0 0;
    border-bottom: 1px solid #EDEDED;

    label {
      flex: 1;
      display: flex;
      //align-items: center;
      font-size: 16px;
      font-weight: 600;

      &::before {
        content: '';
        display: flex;
        height: 16px;
        width: 4px;
        background-color: #FF9C00;
        margin: 0 9px 0 0;
      }
    }
  }

  .opbtn {
    display: flex;

    span {
      display: flex;
      height: 20px;
      align-items: center;
      padding: 0 15px;

      & + span {
        border-left: 1px solid #DCDCDC;
      }

      img {
        display: block;
        height: 100%;

        &:hover {
          cursor: pointer;
          opacity: 0.5;
        }
      }
    }
  }

  .tabContent {
    box-sizing: border-box;
    padding: 20px 0 0 0;
    width: 100%;
    height: calc(100vh - 205px);
    overflow: hidden;
    overflow-y: auto;
  }
}

</style>